<!DOCTYPE html>
<html>
<head>
	<title>
		选择等级
	</title>

	<link rel="stylesheet" type="text/css" href="./dist/lib/weui.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body,html {
			width: 100%;
		}
		.myContent {
			min-width: 320px;
			background: url("./statics/img/level/bg.png") no-repeat center;
			min-height: 667px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			margin: 0 auto;
		} 
		.myLevel {
			justify-content: center;
			background: url("./statics/img/level/card.png") no-repeat center;
			height: 420px;
			width: 286px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.myLevel span {
			margin-top: 22px;
			font-size: 24px;
			color: #07a5bb;
		}
		.levelBtns {
			margin-top: 60px;
			width: 216px;
			justify-content: space-around;

		}
		.myBtn {
			width: 108px;
			height: 30px;
			display: inline-block;
			border: none;
			outline: none;
		}
		.level1 {
			background: url("./statics/img/level/1.png") no-repeat center;
			margin-right: 34px;
		}
		.level2 {
			background: url("./statics/img/level/2.png") no-repeat center;
		}
		.level3 {
			background: url("./statics/img/level/3.png") no-repeat center;
			margin-right: 34px;
		}
		.level4 {
			background: url("./statics/img/level/4.png") no-repeat center;
		}
		.level5 {
			background: url("./statics/img/level/5.png") no-repeat center;
			margin-right: 34px;
		}
		.level6 {
			background: url("./statics/img/level/6.png") no-repeat center;
		}
		@media screen and (min-width: 640px) {
		    .myContent {
		    	max-width: 1020px;
		    	background: url("./statics/img/level/bg2.png");
		    }
		    .myLevel {
		    	width: 572px;
		    	height: 840px;
		    	background: url("./statics/img/level/card2.png");
		    	background-size:100%;
		    }
		}
		
	</style>
</head>
<body>
	<div class="myContent">
		<img src="./statics/img/level/string.png">
		<div class="myLevel">
			<span>选择您或孩子的年级</span>
		  	<div class="weui-flex levelBtns">
		  		<div class="weui-flex__item">
		  			<button class="myBtn level1"></button>
			  	</div>
			  	<div class="weui-flex__item">
		  			<button class="myBtn level2"></button>
			  	</div>
		  	</div>
		  	<div class="weui-flex levelBtns">
		  		<div class="weui-flex__item">
		  			<button class="myBtn level3"></button>
			  	</div>
			  	<div class="weui-flex__item">
		  			<button class="myBtn level4"></button>
			  	</div>
		  	</div>
		  	<div class="weui-flex levelBtns">
		  		<div class="weui-flex__item">
		  			<button class="myBtn level5"></button>
			  	</div>
			  	<div class="weui-flex__item">
		  			<button class="myBtn level6"></button>
			  	</div>
		  	</div>
		</div>
	</div>
</body>
</html>